var $ = jQuery;

$(function () {

    let casesSlider = document.querySelector('[data-cases-slider]');
    let sliderControls = document.querySelector('[data-cases-controls]');
    
  const tinySliderCases = tns({
    container: casesSlider,
    items: 1,
    controlsContainer: sliderControls,
    nav: false,
    loop: false,
    gutter: 500,
  });
  
  tinySliderCases.events.on('indexChanged',function(event){
    Array.from(document.querySelectorAll('[data-cases-slider-sync]')).forEach(text => {
        text.hidden = true;
    });
    const selector = `[data-cases-slider-sync="${event.index}"]`
    document.querySelector(selector).hidden = false;
  });



  var info = tinySliderCases.getInfo(),
      current = document.querySelector('[data-current]'),
      total = document.querySelector('[data-total]');
      
      current.textContent = info.displayIndex.toString().padStart(2, '0');
      total.textContent = info.slideCount.toString().padStart(2, '0');
    
  tinySliderCases.events.on('transitionStart', function(info){
    current.textContent = info.displayIndex.toString().padStart(2, '0');
  });

});